<template>
  <div>
    <el-steps direction="vertical" style="margin-left: 100px;" space="80px" :active="activeNum" finish-status="success">
      <el-step v-for="(item,index) in taskList" :title="item.nodeName"  :key="index">
        <template slot="description">
          <div v-if="item.taskStatusOpt=='completed' && !item.endNode">
            <p><span>{{'办理人员: '+item.signNickName + ' 操作结果: '+item.finishFlagOpt}}</span>
               <span v-if="item.canWithDraw" style="margin-left: 20px;"><el-button size="mini" @click="withDraw(item.taskId)">撤回</el-button></span>
            </p>
            <p>{{'签收时间: '+item.signTime+' 完成时间: '+item.finishTime}}</p>
            <p>{{'办理意见: '+(item.finishComments?item.finishComments:'无')}}</p>
          </div>
          <div v-if="item.taskStatusOpt=='signed'">
            <p>{{'办理人员: '+item.signNickName }}</p>
            <p>{{'签收时间: '+item.signTime}}</p>
            <p v-if="item.canReset"><el-button size="mini" @click="resetApproval(item.taskId)">重置</el-button><el-button size="mini" style="margin-left: 20px;" @click="approval(item.taskId)">签批</el-button></p>
          </div>
          <div v-if="item.taskStatusOpt=='unsigned'">
            <p v-if="item.canSign"><el-button size="mini" @click="sign(item.taskId)">签收</el-button></p>
          </div>
          <div v-if="item.taskLogList">
            操作日志:
            <ul>
              <li v-for="log in item.taskLogList" :key="log.logId">
                {{log.content}}&nbsp;&nbsp;修改人：{{log.createBy}}&nbsp;&nbsp;时间:{{log.createTime}}
              </li>
            </ul>
          </div>
        </template>
      </el-step>
    </el-steps>
    <!-- 添加或修改实验室地址对话框 -->
    <el-dialog title="签批处理" :visible.sync="open" width="440px" append-to-body>
      <el-form ref="form" :model="form" :rules="rules" label-width="80px">
       <el-form-item label="签批结果" prop="finishFlagOpt">
         <el-select v-model="form.finishFlagOpt" placeholder="请选择办理结果" class="input_w">
           <el-option
             v-for="item in operations"
             :key="item"
             :label="getOpName(item)"
             :value="item"
           ></el-option>
         </el-select>
       </el-form-item>
       <el-form-item label="签批意见" prop="finishComments" :required="form.finishFlagOpt!='passed'">
         <el-input v-model="form.finishComments" type="textarea" rows="3" placeholder="签批意见" class="input_w" />
       </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitForm">确 定</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
  import {
    getInstanceTaskes,
    withdrawTask,
    resetTask,
    compeletedTask,
    signTask
  } from "@/api/labdata/flowTask";
  import Schema from 'async-validator'
  // 设置报错提示信息
  Schema.messages.required = fieldName => {
    return '该项为必填项'
  }
  export default {
    name: "TaskApproval",
    data() {
      return {
        activeNum: 1,
        // 办理结果字典
        finishFlagOptOptions: [],
        // 是否显示弹出层
        open: false,
        // 遮罩层
        loading: true,
        taskList: [],
        operations:[],
        // 是否显示弹出层
        open: false,
        // 表单参数
        form: {},
        // 表单校验
        rules: {
          finishFlagOpt: [
            { required: true, message: "签批结果不能为空", trigger: "blur" }
          ],
         /* finishComments: [
            { required: true, message: "签批意见不能为空", trigger: "blur" }
          ], */
        }
      };
    },
    props: {
      instanceId: Number,
    },
    watch: {
      instanceId: function(val) {
        this.activeNum = 1;
        this.getList();
      }
    },
    created() {
      this.getList();
      this.getDicts("finishFlagOpt").then(response => {
        this.finishFlagOptOptions = response.data;
      });
    },
    methods: {
      getOpName(op) {
        return this.selectDictLabel(this.finishFlagOptOptions, op);
      },
      sign(taskId){
        signTask(taskId).then(response=>{
          let result = response.data;
          if(result>0){
            this.msgSuccess("签收成功");
          }else{
            this.$message.warning("已经被别人签收过了！");
          }
          this.$emit("refresh");
          this.getList();
        });
      },
      approval(taskId){
        this.reset();
        this.form.taskId = taskId;
        this.open = true;
      },
      withDraw(taskId){
        withdrawTask(taskId).then(response=>{
          this.$emit("refresh");
          this.getList();
        });
      },
      resetApproval(taskId){
        resetTask(taskId).then(respone=>{
          this.$emit("refresh");
          this.getList();
        });
      },
      reset(){
        this.form = {
          finishFlagOpt: null,
          finishComments: null,
        }
        this.resetForm("form");
      },
      submitForm(){
        this.$refs["form"].validate(valid => {
          if (valid) {
           compeletedTask(this.form).then(response=>{
              this.$emit("refresh");
              this.getList();
              this.open = false;
            }); 
        }
        });
      },
      // 取消按钮
      cancel() {
        this.open = false;
      },
      getList() {
        //console.log('instanceId='+this.instanceId);
        if (this.instanceId) {
          getInstanceTaskes(this.instanceId).then(response => {
            this.taskList = response.data;
            this.taskList.forEach(item => {
              if (item.isCurrentOpt == 1 || item.taskStatusOpt=='refused') {
                this.activeNum = item.nodeNo - 1;
                //console.log('activeNum='+this.activeNum);
              }
              if(item.isCurrentOpt == 1){
                this.operations = item.operation.split(",");
              }
            });
            this.$forceUpdate();

          });


        }
      },

    }
  };
</script>
<style type="text/css" scoped lang="scss">
  /deep/ .el-step__description {
        margin-top: -15px;
        font-size: 14px;
        line-height: 10px;
  }
  .input_w{
    width: 300px;
  }
</style>
